<template>
  <div class="topHeader">
    <topMenu v-if="!['login'].includes(routerName)"></topMenu>
    <div class="width1200">
      <logoBox class="logoBox"></logoBox>
      <menuBox :menu-style="{color:'blueColor'}" v-if="routerName!='login'" class="menuBox"></menuBox>
      <searchBox v-if="routerName!='login'" class="searchBox"></searchBox>
    </div>
  </div>
</template>

<script>
import logoBox from "@/views/Main/module/logoBox";
import menuBox from "@/views/Main/module/menuBox";
import searchBox from "@/views/Main/module/searchBox";
import topMenu from "@/views/Main/module/topMenu";
export default {
  name: "topHeader",
  components:{
    logoBox,menuBox,searchBox,
    topMenu
  },
  computed:{
    routerName(){
      return this.$route.name
    },
  }
}
</script>

<style scoped lang="less">
.topHeader{
  width: 100%;
  //height: 132px;
  height: 110px;
  background-color: white;
  .width1200{
    position: relative;
    height: 78px;
    .logoBox{
      position: absolute;
      left:0;
      bottom: 20px;
    }
    .menuBox{
      position: absolute;
      bottom: 10px;
      left:300px;
    }
    .searchBox{
      position: absolute;
      right: 0;
      bottom:22px;
    }
  }
}
</style>